<template>
  <transition enter-active-class="animate__animated animate__slideInLeft">
    <div class="player" v-if="$root.musicStore.musicID">
      <audio
        :src="`https://music.163.com/song/media/outer/url?id=${$root.musicStore.musicID}.mp3`"
        autoplay
        @timeupdate="timeUpdate"
        ref="audio"
        @pause="pause"
        @play="play"
        @ended="ended"
      ></audio>

      <div class="playBar" v-if="$root.musicStore.currentMusic">
        <i ref="randImg" @click="changeTpage">
          <template v-if="$root.musicStore.currentMusic.picUrl">
            <!-- <img :src="$root.musicStore.currentMusic.picUrl" /> -->
            <img v-lazy="$root.musicStore.currentMusic.picUrl" />
          </template>
          <template v-if="$root.musicStore.currentMusic.al">
            <!-- <img :src="$root.musicStore.currentMusic.al.picUrl" /> -->
            <img v-lazy="$root.musicStore.currentMusic.al.picUrl" />
          </template>
          <template v-if="$root.musicStore.currentMusic.artists">
            <!-- <img :src="$root.musicStore.currentMusic.artists[0].img1v1Url" /> -->
            <img v-lazy="$root.musicStore.currentMusic.artists[0].img1v1Url" />
          </template>
        </i>
        <i @click="changeTpage">
          <div>
            {{ $root.musicStore.currentMusic.name }} --
            <template v-if="$root.musicStore.currentMusic.ar">
              {{ $root.musicStore.currentMusic.ar[0].name }}
            </template>
            <template v-if="$root.musicStore.currentMusic.artists">
              {{ $root.musicStore.currentMusic.artists[0].name }}
            </template>
            <template v-if="$root.musicStore.currentMusic.song">
              {{ $root.musicStore.currentMusic.song.artists[0].name }}
            </template>
          </div>
        </i>
        <i>
          <span @click="prevSong"></span>
        </i>
        <i>
          <canvas
            @click="changePlay"
            height="100"
            ref="processBtn"
            width="100"
          ></canvas>
        </i>
        <i>
          <span @click="nextSong"></span>
        </i>
      </div>

      <transition
        enter-active-class="animate__animated animate__backInUp"
        leave-active-class="animate__animated animate__backOutDown"
      >
        <!-- 播放器 -->
        <div class="fullplay" v-show="isPage">
          <p class="back">
            <!-- <img @click="changeFpage" src="../assets/close.png" /> -->
            <van-icon
              name="revoke"
              color="white"
              size="30"
              @click="changeFpage"
            />
          </p>
          <h3>
            {{ $root.musicStore.currentMusic.name }} <br />
            <span>
              <template v-if="$root.musicStore.currentMusic.song">
                {{ $root.musicStore.currentMusic.song.artists[0].name }}
              </template>
              <template v-if="$root.musicStore.currentMusic.artists">
                {{ $root.musicStore.currentMusic.artists[0].name }}
              </template>
              <template v-if="$root.musicStore.currentMusic.ar">
                {{ $root.musicStore.currentMusic.ar[0].name }}
              </template>
            </span>
          </h3>
          <div ref="songImg" class="songImg">
            <template v-if="$root.musicStore.currentMusic.picUrl">
              <!-- <img :src="$root.musicStore.currentMusic.picUrl" /> -->
              <img v-lazy="$root.musicStore.currentMusic.picUrl" />
            </template>
            <template v-if="$root.musicStore.currentMusic.al">
              <!-- <img :src="$root.musicStore.currentMusic.al.picUrl" /> -->
              <img v-lazy="$root.musicStore.currentMusic.al.picUrl" />
            </template>
            <template v-if="$root.musicStore.currentMusic.artists">
              <!-- <img :src="$root.musicStore.currentMusic.artists[0].img1v1Url" /> -->
              <img
                v-lazy="$root.musicStore.currentMusic.artists[0].img1v1Url"
              />
            </template>
          </div>

          <div class="lyric">
            <ul
              v-if="lyric.length > 0"
              :style="{
                transform: `translateY(-${moveTop}px)`,
              }"
            >
              <li
                ref="lyricLi"
                v-for="(l, index) in lyric"
                :key="index"
                :class="{ active: Index == index }"
              >
                {{ l.lyric }}
              </li>
            </ul>
            <template v-if="lyric.length == 0">
              <p>非常抱歉,没有找到歌词......</p>
            </template>
          </div>

          <div class="progress">
            <input
              type="range"
              min="0"
              :max="duration"
              :value="currentTime"
              @change="changeValue"
            />
            <i
              :style="{
                width: `${(currentTime / duration) * 90}vw`,
              }"
            ></i>
          </div>

          <!-- 上一首 下一首 -->
          <div class="controlBar">
            <button @click="changeModel" v-if="mShow" class="order"></button>
            <button @click="changeModel" v-if="!mShow" class="random"></button>
            <button @click="prevSong"></button>
            <button @click="changePlay" v-if="isplay" class="zanting"></button>
            <button @click="changePlay" v-if="!isplay" class="bofang"></button>
            <button @click="nextSong"></button>
            <button @click="changePlayList"></button>
            <button v-if="isMute" class="mute" @click="changeVoice">
              <van-slider
                v-if="vShow"
                button-size="15px"
                bar-height="10px"
                v-model="val"
                @input="onChange"
                vertical
              />
            </button>
            <button v-if="!isMute" class="voice" @click="changeVoice">
              <van-slider
                v-if="vShow"
                button-size="15px"
                bar-height="10px"
                v-model="val"
                @input="onChange"
                vertical
              />
            </button>
          </div>
          <transition
            enter-active-class="animate__animated animate__fadeInUp"
            leave-active-class="animate__animated animate__fadeOutDown"
          >
            <ul class="playlist" v-if="showPlayList">
              <h3>
                <van-icon name="orders-o" size="20" />歌单列表({{
                  $root.musicStore.musicList.length
                }})

                <van-icon
                  name="revoke"
                  color="white"
                  size="20"
                  @click="clearPlayList"
                />
              </h3>
              <li
                v-for="m in $root.musicStore.musicList"
                :class="{ active: m.id == $root.musicStore.musicID }"
                :key="m.id"
                @click="playMusic(m)"
              >
                {{ m.name }} --
                <template v-if="m.song">
                  {{ m.song.artists[0].name }}
                </template>
                <template v-if="m.artists">
                  {{ m.artists[0].name }}
                </template>
                <template v-if="m.ar">
                  {{ m.ar[0].name }}
                </template>

                <van-icon name="close" @click.stop="deleteMusic(m.id)" />
              </li>
            </ul>
          </transition>
        </div>
      </transition>
    </div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      isplay: true,
      isPage: false,
      currentTime: 0,
      duration: 0,
      currentIndex: 0,
      showPlayList: false,
      lyric: [],
      moveTop: 0,
      Index: 0,
      playMode: "order",
      mShow: true,
      isMute: false,
      vShow: false,
      val: 50,
    };
  },
  created() {
    if (this.isPage) {
      this.$refs.audio.volume = this.val * 0.01;
    }
  },
  computed: {
    musicIDs() {
      let musicID = this.$root.musicStore.musicID;
      return musicID;
    },
    currentMusics() {
      let currentMusic = this.$root.musicStore.currentMusic;
      return currentMusic;
    },
  },
  watch: {
    musicIDs(musicID) {
      if (musicID) {
        this.$axios
          // .get("http://music.kele8.cn/lyric?id=" + musicID)
          .get("/lyric?id=" + musicID)
          .then((data) => {
            let lyricArr = data.data.lrc.lyric.split("\n");
            lyricArr.pop();
            let reg = /\[(\d+):(\d+\.\d+)\](.*)/;
            let newLyric = lyricArr.map((d) => {
              if (reg.test(d)) {
                return {
                  time: parseInt(RegExp.$1) * 60 + parseFloat(RegExp.$2),
                  lyric: RegExp.$3,
                };
              }
            });

            this.lyric = newLyric;
          })
          .catch((err) => {
            console.log(err);
            this.lyric = [];
          });
      }
    },
    currentMusics(currentMusic) {
      this.$root.musicStore.currentMusic = currentMusic;
    },
  },

  methods: {
    deleteMusic(val) {
      for (let i in this.$root.musicStore.musicList) {
        if (val == this.$root.musicStore.musicList[i].id) {
          if (val == this.$root.musicStore.musicID) {
            this.nextSong();
            this.$root.musicStore.musicList.splice(i, 1);

            if (this.$root.musicStore.musicList.length == 0) {
              this.$root.musicStore.currentMusic == null;
              this.$root.musicStore.musicID = null;
              this.isPage = false;
              this.showPlayList = false;
              this.isplay = false;
              return;
            }

            break;
          } else {
            this.$root.musicStore.musicList.splice(i, 1);
          }
        }
      }
    },
    changeVoice() {
      this.vShow = !this.vShow;
    },
    onChange(val) {
      if (this.isPage) {
        this.$refs.audio.volume = val * 0.01;
      }
      this.isMute = false;
      setTimeout(() => {
        this.vShow = false;
      }, 1000);

      if (val == 0) {
        this.isMute = true;
      }
    },
    changePlayList() {
      this.showPlayList = true;
    },
    clearPlayList() {
      this.showPlayList = false;
    },
    playMusic(item) {
      this.$root.musicStore.musicID = item.id;
      this.$root.musicStore.currentMusic = item;
      for (let i in this.$root.musicStore.musicList) {
        if (
          this.$root.musicStore.musicList[i].id == this.$root.musicStore.musicID
        ) {
          this.currentIndex = i;
        }
      }
    },
    changeSong() {
      let currentIndex = 0;
      let musicList = this.$root.musicStore.musicList;

      if (this.playMode == "random") {
        return parseInt(musicList.length * Math.random());
      } else {
        for (let i in musicList) {
          if (musicList[i].id === this.$root.musicStore.musicID) {
            this.currentIndex == i;
            currentIndex = i;
            break;
          }
        }
        return currentIndex;
      }
    },
    changeModel() {
      if (this.playMode == "order") {
        this.playMode = "random";
        this.mShow = false;
      } else {
        this.playMode = "order";
        this.mShow = true;
      }
    },
    ended() {
      this.nextSong();
    },
    prevSong() {
      let currentIndex = this.changeSong();
      if (this.$root.musicStore.musicList == 1) {
        return false;
      }

      let musicList = this.$root.musicStore.musicList;

      currentIndex--;

      if (currentIndex < 0) {
        this.currentIndex = musicList.length - 1;
        currentIndex = musicList.length - 1;
      }
      this.currentIndex = currentIndex;

      this.$root.musicStore.musicID = musicList[currentIndex].id;
      this.$root.musicStore.currentMusic = musicList[currentIndex];
      this.moveTop = 0;
    },
    nextSong() {
      let currentIndex = this.changeSong();

      // if (this.$root.musicStore.musicList == 1) {
      //   return false;
      // }

      let musicList = this.$root.musicStore.musicList;

      currentIndex++;

      if (currentIndex >= musicList.length) {
        this.currentIndex = 0;
        currentIndex = 0;
      }

      this.currentIndex = currentIndex;

      this.$root.musicStore.musicID = musicList[currentIndex].id;
      this.$root.musicStore.currentMusic = musicList[currentIndex];
      this.moveTop = 0;
    },
    play(event) {
      //播放事件
      this.isplay = false;
      this.changePlay();
      this.timeUpdate(event);
    },
    pause(event) {
      //暂停事件
      this.isplay = true;
      this.changePlay();
      this.timeUpdate(event);
    },

    //改变进度条
    changeValue(event) {
      let time = event.target.value;
      this.currentTime = time;
      this.$refs.audio.currentTime = time;
    },

    //打开播放器的
    changeTpage() {
      this.isPage = true;
    },
    changeFpage() {
      this.isPage = false;
      this.showPlayList = false;
    },
    //改变播放暂停的状态
    changePlay() {
      let audio = this.$refs.audio;
      let randImg = this.$refs.randImg;
      let songImg = this.$refs.songImg;

      if (this.isplay) {
        if (this.$root.musicStore.musicID) {
          audio.pause();
          randImg.style.animationPlayState = "paused";
          songImg.style.animationPlayState = "paused";
          this.isplay = false;
          this.$root.musicStore.isplay = false;
        }
      } else {
        audio.play();
        this.isplay = true;
        randImg.style.animationPlayState = "running";
        songImg.style.animationPlayState = "running";
        this.$root.musicStore.isplay = true;
      }
    },
    timeUpdate(event) {
      let audio = event.target;
      let currentTime = audio.currentTime;
      let duration = audio.duration;
      this.currentTime = currentTime;
      this.duration = duration;
      if (this.$root.musicStore.musicID) {
        this.drawCircle(currentTime, duration);
        //让歌词动起来
        for (var i = 0; i < this.lyric.length; i++) {
          if (i >= this.lyric.length - 1) {
            //循环到最后一条的,不需要和下一条匹配 直接显示为最后一条高亮
            this.Index = i;
            break;
          }

          if (
            currentTime >= this.lyric[i].time &&
            currentTime < this.lyric[i + 1].time
          ) {
            if (i > 0) {
              //获取当前播放歌词上一条歌词距离父元素上面的距离.
              this.moveTop = this.$refs.lyricLi[i - 1].offsetTop;
            }
            this.Index = i;
            break;
          }
        }
      }
    },
    drawCircle(currentTime, duration) {
      let canvas = this.$refs.processBtn.getContext("2d");
      canvas.clearRect(0, 0, 100, 100);
      canvas.beginPath();
      canvas.strokeStyle = "rgb(41, 120, 211)";
      canvas.lineWidth = 10;
      canvas.arc(50, 50, 40, 0, 2 * Math.PI);
      canvas.stroke();
      canvas.closePath();

      canvas.beginPath();
      canvas.strokeStyle = "rgb(220 , 220, 220)";
      canvas.lineWidth = 10;
      canvas.arc(
        50,
        50,
        40,
        0,
        2 * Math.PI * parseFloat(currentTime / duration)
      );
      canvas.stroke();
      canvas.closePath();

      canvas.beginPath();
      let img = new Image();
      img.src =
        "";
      if (this.isplay) {
        img.src =
          "";
      }
      canvas.drawImage(img, 30, 30, 40, 40);
      canvas.closePath();
    },
  },
};
</script>

<style lang="less" scoped>
.player {
  width: 100vw;
  position: fixed;
  z-index: 9;
  bottom: 0px;
  // background: rgba(34, 213, 156, 0.9);

  .fullplay {
    width: 100vw;
    height: 100vh;
    // background: rgba(34, 213, 156);
    background: url(https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=186934110,1808044563&fm=26&gp=0.jpg);
    background-size: cover;
    overflow-y: auto;
    h3 {
      text-align: center;
      font-weight: bolder;
      font-size: 20px;
      margin-bottom: 5px;
      span {
        font-size: 18px;
        font-weight: bold;
      }
    }
    .back {
      text-align: right;
      height: 25px;
      border: 1px solid transparent;
      position: relative;
      img {
        width: 25px;
        height: 25px;
        cursor: pointer;
        position: absolute;
        top: 5px;
        right: 20px;
      }
    }
    .songImg {
      width: 50vw;
      height: 50vw;
      border-radius: 50%;
      margin: 0 auto;
      box-shadow: 0px 0px 10px 3px black;
      overflow: hidden;
      animation: randImg 5s linear 0s infinite;

      img {
        width: 100%;
        height: 100%;
      }
    }
    .lyric {
      height: 30vh;
      overflow: hidden;
      text-align: center;

      ul {
        width: 100%;
        height: 100%;
        transition: all 0.5s linear;

        li {
          margin: 5px 0;
          font-size: 18px;
          color: whitesmoke;
          &.active {
            color: rgb(233, 231, 97);
            font-weight: 700;
            text-shadow: 0 0 1em black;
          }
        }
      }
    }
    .progress {
      width: 90vw;
      text-align: center;
      position: relative;
      margin: 20px 5vw;
      z-index: 2;
      i {
        position: absolute;
        height: 6px;
        background: yellow;
        left: 0;
        top: 8px;
        z-index: 1;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
      }
      input {
        appearance: none;
        -webkit-appearance: none;
        background: transparent;
        width: 100%;
        &::-webkit-slider-thumb {
          appearance: none;
          -webkit-appearance: none;
          width: 10px;
          height: 10px;
          margin-top: -2px;
          border-radius: 50%;
          background: yellow;
        }
        &::-webkit-slider-runnable-track {
          appearance: none;
          -webkit-appearance: none;
          height: 6px;
          border-radius: 5px;
          background: rgba(200, 200, 200, 0.5);
          box-shadow: inset 10px 10px 10px rgba(200, 200, 200, 0.3);
        }
      }
    }
  }
  audio {
    width: 100%;
    height: 50px;
  }
  .playBar {
    display: flex;
    padding: 0 5px;
    overflow: hidden;
    background: rgba(244, 247, 81, 0.9);
    border-radius: 30px;
    i {
      &:first-of-type {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        overflow: hidden;
        animation: randImg 5s linear 0s infinite;
        img {
          width: 100%;
          height: 100%;
        }
      }
      &:nth-of-type(2) {
        flex: 1;
        text-align: center;
        font-style: normal;
        padding: 15px 0;
        cursor: pointer;
        div {
          width: 100%;
          height: 21px;
          overflow: hidden;
          padding: 0px 10px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
        }
      }

      &:nth-of-type(3) {
        width: 50px;
        height: 50px;
        border-radius: 50%;

        span {
          display: inline-block;
          width: 32px;
          height: 32px;
          margin-top: 9px;
          margin-left: 9px;
          background: url(../assets/prev.png);
          background-repeat: no-repeat;
          cursor: pointer;
        }
      }

      &:nth-of-type(4) {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        cursor: pointer;
        canvas {
          width: 50px;
          height: 50px;
        }
      }
      &:last-of-type {
        width: 50px;
        height: 50px;
        border-radius: 50%;

        span {
          display: inline-block;
          width: 32px;
          height: 32px;
          margin-top: 9px;
          margin-left: 9px;
          background: url(../assets/next.png);
          background-repeat: no-repeat;
          cursor: pointer;
        }
      }
    }
  }
  .playlist {
    position: absolute;
    bottom: 0;
    background: rgba(50, 50, 50, 0.5);
    padding: 0 10px;
    width: 100%;
    height: 70vh;
    overflow-y: auto;
    border: 1px solid yellowgreen;
    z-index: 10;
    border-radius: 20px;
    li {
      margin: 5px 0;
      color: #ddd;
      position: relative;
      &.active {
        font-weight: 700;
        color: rgb(244, 247, 81);
        text-shadow: 0 0 1em black;
      }
      .van-icon-close {
        position: absolute;
        right: 10px;
        z-index: 20;
      }
    }
    h3 {
      text-align: left;
      position: relative;
      border: 1px transparent solid;
      color: honeydew;
      .van-icon-revoke {
        position: absolute;
        right: 0;
        top: 0;
      }
      .van-icon-orders-o {
        margin-top: 2px;
      }
    }
  }
  .controlBar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;

    button {
      width: 30px;
      height: 30px;
      cursor: pointer;
      border: none;
      // background-color: rgba(34, 213, 156);
      background: rgb(63, 60, 79);
      outline: none;
      background-repeat: no-repeat;
      background-size: 100%;
      padding: 0;
      &.order {
        background-image: url(../assets/order.png);
      }
      &.random {
        background-image: url(../assets/random.png);
      }

      &:nth-of-type(2) {
        background-image: url(../assets/prev.png);
      }
      &.zanting {
        background-image: url(../assets/pause.png);
        background-size: 30px 30px;
      }
      &.bofang {
        background-image: url(../assets/play.png);
      }
      &:nth-of-type(4) {
        background-image: url(../assets/next.png);
      }
      &:nth-of-type(5) {
        background-image: url(../assets/musicList.png);
      }
      &.mute {
        background-image: url(../assets/mute.png);

        position: relative;
      }
      &.voice {
        background-image: url(../assets/voice.png);

        position: relative;
      }
    }
  }
}

.van-slider {
  height: 50px;
  position: absolute;
  top: 40px;
  left: 8px;
  z-index: 20;
}

@keyframes randImg {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>